<template>
	<div class="">
		<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
			<a-row :gutter="24" :span="12">
				<a-col :span="22" :wrapper="2" pull="3">
					<a-form-item label="字典名称" prop="roleName">
						<a-input v-decorator="['roleName', { rules: [{ required: true, message: '请输入字典名称' }] }]" placeholder="请输入权限字符"> </a-input>
					</a-form-item>
				</a-col>
				<a-col :span="22" :wrapper="2" pull="3">
					<a-form-item label="字典类型" prop="postCode">
						<a-input v-decorator="['postCode', { rules: [{ required: true, message: '请输入字典类型' }] }]" placeholder="请输入角色名称"> </a-input>
					</a-form-item>
				</a-col>
				<a-col :span="22" :wrapper="2" pull="3">
					<a-form-item label="显示顺序" prop="dictType">
						<a-input v-decorator="['dictType', { rules: [{ required: true, message: '请输入显示顺序' }] }]" placeholder="请输入显示顺序"> </a-input>
					</a-form-item>
				</a-col>

				<a-col :span="22" :wrapper="2" pull="3">
					<a-form-item label="状态" prop="status">
						<a-radio-group v-model="value">
							<a-radio :value="1"> 正常 </a-radio>
							<a-radio :value="2"> 正常</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col :span="22" :wrapper="2" pull="3">
					<a-form-model-item label="备注" prop="remark"> <a-input v-model="form.desc" type="textarea" /> </a-form-model-item>
				</a-col>
			</a-row>

			<a-form-item :wrapper-col="{ span: 24, offset: 10 }">
				<a-button type="primary" html-type="submit"> 提交 </a-button>
			</a-form-item>
			<!-- <a-form-item :wrapper-col="{ span: 12 }">
			<a-button type="primary" html-type="submit"> Submit </a-button>
			<a-button type="primary" html-type="submit"> Submit </a-button>
		</a-form-item> -->
		</a-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			value: 1,
			// value: undefined,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, { name: 'coordinated' }),
		};
	},
	methods: {
		// 状态选择
		onChange(e) {
			console.log('radio checked', e.target.value);
		},
		onSelect(selectedKeys, info) {
			console.log('onSelect', info);
			this.selectedKeys = selectedKeys;
		},
		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields((err, values) => {
				if (!err) {
					console.log('Received values of form: ', values);
				}
			});
		},
		handleSelectChange(value) {
			console.log(value);
			// this.form.setFieldsValue({
			// 	note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
			// });
		},
	},
};
</script>
